<template>
  <div class="village_main">
    <head-top goBack="true" head-title="通知公告"></head-top>
    <!--改版代码-->
    <div class="village_body" v-if="statusNum === 1">
      <ul class="fav_list">
        <li class="list_li" @click="$router.push('/home/VillageDetail/'+item.id+'/'+item.type)" v-for="(item,index) in detail1" :key="index">
          <p>{{item.title}}</p>
          <label class="list_label">
            <span>{{item.created_at*1000 | dateFmt(('YYYY-MM-DD'))}}</span>
          </label>
        </li>
      </ul>
    </div>
    <div class="no_info_div" v-if="statusNum === 0">
      <p>未在<span>{{vallageTitle}}</span>找到您的业主信息</p>
      <p>请进行<span>业主变更</span>或<span>切换到您的小区</span></p>
      <button @click="goIdent">前往业主变更</button>
    </div>
    <div class="default" v-show="!detail1.length && !noResult && statusNum!==0">
      <p>数据加载中</p>
    </div>
    <div class="default1" v-show="noResult && statusNum === 1">
      <p>抱歉！暂无数据</p>
    </div>
  </div>
</template>
<style lang="scss">
  @import "../../common/sass/mixin.scss";

  .village_main {
    padding-top: 50px;
    .mint-cell-text {
      @include ellipsis(1);
      line-height: 20px;
    }
    .mint-cell-label {
      @include ellipsis(1);
      line-height: 18px;
      color: #0078de;
    }
    .mint-cell {
      min-height: 55px;
    }
    .mint-cell-wrapper {
      background-size: 100% 1px;
    }
    .mint-cell-value.is-link {
      margin-right: 10px;
      font-size: 12px;
    }

    .village_body{
      width: 100%;
      .fav_list{
        margin: 0;
        padding: 0;
        font-size: 100%;
        vertical-align: baseline;
        border: 0;
        display: block;
        overflow: hidden;
        zoom: 1;
        .list_li{
          padding: 16px 10px;
          font-size: 0;
          border-top: 1px solid #e0e0e0;
          list-style: none;
          p{
            width: 75%;
            line-height: 24px;
            font-size: 14px;
            vertical-align: middle;
            color: #353535;
            text-decoration: none;
            text-overflow: ellipsis;
            white-space: nowrap;
            display: inline-block;
            overflow: hidden;

          }
          .list_label{
            margin-left: 10px;
            font-size: 14px;
            vertical-align: middle;
            display: inline-block;
            span{
              color: #b2b2b2;
              /*margin-right: 15px;*/
              vertical-align: middle;
              display: inline-block;
            }
          }
        }
        .list_li:first-child{
          border-top: none;
        }
      }
    }

  }

  .no_info_div {
    padding: 200px 10px 0px 10px;
    text-align: center;
    font-size: 16px;
    p {
      line-height: 40px;
      span {
        color: #ff0000;
      }
    }
    button {
      width: 60%;
      background-color: #047bda;
      border-radius: 50px;
      font-size: 15px;
      color: #FFFFFF;
      padding: 10px 0 10px 0;
      border: none;
      outline: none;
    }
  }
  .default {
    width: 100%;
    flex: 1;
    display: inline-flex;
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    padding-top: 100px;
    justify-content: center;
    align-items: center;
    background: url("../../assets/loading.gif") no-repeat;
    background-size: 40px 40px;
    background-position: center;
    padding-bottom: 100px;
    p {
      font-size: 15px;
      text-align: center;
      color: #666;
      margin-top: 100px;
    }
  }

  .default1 {
    width: 100%;
    flex: 1;
    display: inline-flex;
    padding-top: 100px;
    justify-content: center;
    align-items: center;
    background: url("../../assets/default.png") no-repeat;
    background-size: 100px 100px;
    background-position: center;
    padding-bottom: 140px;
    p {
      font-size: 15px;
      color: #0b7ad9;
      margin-top: 180px;
    }
  }

  .default2 {
    width: 100%;
    flex: 1;
    display: inline-flex;
    padding: 200px 0;
    p {
      text-align: center;
      font-size: 16px;
      line-height: 26px;
    }
  }
</style>
<script>
  import headTop from '../header/Header.vue'
  import {getMangers} from '../../api/management'
  import {noticeList} from '../../api/homeLogin'
  import {loadPhoneName, loadTitle, loadVillageId} from '../../common/js/cache.js'

  export default {
    name: 'VillageNotice',
    data() {
      return {
        noticeType: '',
        detail1: [],
        noResult: false,
        statusNum: '',
        pName: loadPhoneName(),
        vallageTitle: loadTitle(), // 小区名
        vid: loadVillageId() // 小区ID
      }
    },
    components: {
      headTop
    },
    created() {
      this._getMangers()
    },
    methods: {
      _getMangers() {
        getMangers().then(res => {
          if (res.code === 200) {
            this.statusNum = res.data.status
            // console.log(this.statusNum)
            if (this.statusNum !== 0) {
              this.getVillageList()
            } else {
              this.showPopup = true
            }
          }
        })
      },
      getVillageList() {
        this.noResult = false
        noticeList(this.vid, this.noticeType).then(res => {
          // console.log(res)
          if (res.code === 200) {
            this.detail1 = res.data
          }
          if (this.detail1.length === 0) {
            this.noResult = true
          } else {
            this.noResult = false
          }
        })
      },
      // 前往业主变更
      goIdent() {
        this.$router.push('/my/Ident')
      }
    },
    computed: {
      // detail() {
      //   return this.detail1.reverse()
      // }
    }
  }
</script>
